.personalHomepage {
  box-sizing: border-box;
  width: 75%;
  height: 100%;
  padding: 20px 0;
  column-gap: 30px;
  .banner {
    margin-bottom: 30px;
    :global {
      .articleList {
        display: flex;
        .articleItem {
          flex-direction: row;
          height: 400px;
          .picture {
            flex: 4 1;
            & > img {
              width: 120%;
              height: 100%;
              border-radius: 15px;
            }
            & > span {
              width: 120%;
              height: 100%;
              mix-blend-mode: screen;
            }
            &::after {
              position: absolute;
              left: 81%;
              z-index: 25;
              width: 40%;
              height: 100%;
              background: var(--gradient-cover);
            }
          }
        }
      }
    }
  }
  .featuredFirst {
    display: flex;
    margin-bottom: 15px;
    .featuredFirstLeftWrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 260px;
      height: 450px;
      margin-top: 15px;
      margin-right: 30px;
      padding: 6px;
      font-weight: 900;
      background-image: linear-gradient(60deg, #e21143, #ffb03a);
      border-radius: 15px;
      .featuredFirstLeft {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: #f1f3f9;
        border-radius: 15px;
      }
      .signature {
        color: transparent;
        font-size: 26px;
        text-align: center;
        background-image: linear-gradient(60deg, #e21143, #ffb03a);
        background-clip: text;
      }
      .featuredFirstText {
        font-size: 36px;
      }
    }
    :global {
      .lbbArticleList {
        flex: 1;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        .lbbArticleItem {
          height: 100%;
        }
      }
    }
  }
  .rowTitle {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 30px 0;
    font-weight: 800;
    font-size: 20px;
    border-radius: 30%;
    .title {
      margin-left: 10px;
    }
    .bottomLine {
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 70%;
      height: 6px;
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
      border-radius: 6px;
    }
  }
  .articleListWrapper {
    display: flex;
    .articleListLeft {
      flex: 1;
      .labelListWrapper {
        display: flex;
        margin-bottom: 40px;
        padding: 0 10px;
        overflow-x: hidden;
        background-color: var(--primaryColor);
        border-radius: 6px;
        .labelList {
          display: flex;
          flex-wrap: wrap;
          max-height: 62px;
          .lableItem {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            margin: 10px;
            background-color: #f1f3f9;
            border-radius: 6px;
            cursor: pointer;
            .labelText {
              padding: 10px;
              font-weight: 700;
              border-radius: 6px;
            }
            &:hover {
              background-color: #e21143;
              .labelText {
                color: #fff;
              }
              .articleNumber {
                color: #000;
              }
            }
            .articleNumber {
              margin: 0 6px;
              color: var(--text-accent);
              font-weight: 700;
            }
          }
          .activateArticleItem {
            color: #fff;
            .labelText {
              background: linear-gradient(
                130deg,
                rgb(36, 198, 220),
                rgb(84, 51, 255) 41.07%,
                rgb(255, 0, 153) 76.05%
              );
            }
          }
        }
        .articleLabelListScrollBar {
          overflow-y: hidden;
        }
        .articleLabelList {
          height: auto;
          max-height: unset;
        }
        .moreLable {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: flex-end;
          margin-left: 40px;
          .moreIcon {
            transition: all 0.5s;
          }
        }
        .moreLableHidden {
          display: none;
        }
      }
    }
    .articleListRight {
      width: 300px;
      margin-left: 45px;
      .rightRow {
        box-sizing: border-box;
        margin-top: 10px;
        padding: 10px 10px 20px 10px;
        background-color: #fff;
        border-radius: 10px;
        .rowTitle {
          margin: unset;
        }
        .commentList {
          margin-top: 20px;
          .listItem {
            box-sizing: border-box;
            margin-top: 10px;
            padding: 10px;
            background-color: #f1f3f9;
            border-radius: 10px;
            &:hover {
              box-shadow: 0px 0px 20px -2px #67b3dd;
            }
          }
        }
        .briefIntroduction {
          margin-top: 20px;
        }
      }
    }
  }
}
